var app = new Vue({
    el: '#app',
    data: {
        list: [{
                name: "电子产品",
                productList: [{
                        id: '1',
                        name: 'iPhone 7',
                        price: 6188,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '2',
                        name: 'iPad Pro',
                        price: 5188,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '3',
                        name: 'MacBook Pro',
                        price: 21488,
                        count: 1,
                        status: 1
                    }
                ]
            },
            {
                name: "生活用品",
                productList: [{
                        id: '1',
                        name: '尺子',
                        price: 2.00,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '2',
                        name: '包装箱',
                        price: 29.99,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '3',
                        name: '毛巾',
                        price: 15.98,
                        count: 1,
                        status: 1
                    }
                ]
            },
            {
                name: "水果蔬菜",
                productList: [{
                        id: '1',
                        name: '国产香蕉',
                        price: 2.88,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '2',
                        name: '草莓',
                        price: 15.00,
                        count: 1,
                        status: 1
                    },
                    {
                        id: '3',
                        name: '车厘子',
                        price: 29.99,
                        count: 1,
                        status: 1
                    }
                ]
            }
        ]
    },
    computed: {
        totalPrice: function () {
            var total = 0;
            for (var i = 0; i < this.list.length; i++) {
                for (var j = 0; j < this.list[i].productList.length; j++) {
                    var item = this.list[i].productList[j];
                    if (item.status) {
                        total += item.price * item.count;
                    }
                }
            }
            return total != 0 ? total.toLocaleString() : 0;
        }
    },
    methods: {
        handleTableItem: function (tableItem) {
            var status = this.isCheckedTableItem(tableItem);
            status = status ? 0 : 1;
            for (var i = 0; i < tableItem.productList.length; i++) {
                tableItem.productList[i].status = status;
            }
        },
        isCheckedTableItem: function (tableItem) {
            var status = true;
            for (var i = 0; i < tableItem.productList.length; i++) {
                if (!tableItem.productList[i].status) {
                    status = false;
                    return status;
                }
            }
            return status;
        },
        //改变某条记录选中状态
        handleChecked: function (item) {
            item.status = !item.status;
        },
        handleReduce: function (item) {
            if (item.count === 1) return;
            item.count--;
        },
        handleAdd: function (item) {
            item.count++;
        },
        handleRemove: function (index, tableIndex) {
            this.list[tableIndex].productList.splice(index, 1);
        },
        isChecked: function (item) {
            return item.status;
        },
        isCheckedAll: function () {
            //列表全为true该status才为true，否则为false
            var status = true;
            for (var i = 0; i < this.list.length; i++) {
                //一旦列表的status有一个为false则status就为false
                for (var j = 0; j < this.list[i].productList.length; j++) {
                    if (!this.list[i].productList[j].status) {
                        status = false;
                        return status;
                    }
                }
            }
            return status;
        },
        checkAll: function () {
            //拿到是否是全选
            var status = this.isCheckedAll();
            status = status ? 0 : 1;
            for (var i = 0; i < this.list.length; i++) {
                for (var j = 0; j < this.list[i].productList.length; j++) {
                    this.list[i].productList[j].status = status;
                }
            }
        }
    }
})
